<template>
    <LayButton
        :type="bType"
        :border-style="border"
        :border="bBorderColor"
        :radius="bRadius"
        class="btn"
        :disabled="cDisabled"
    >
        <slot> <LayIcon :type="icon" v-if="icon"></LayIcon> {{ label }} </slot>
    </LayButton>
</template>

<script setup lang="ts">
import { LayButton } from '@layui/layui-vue';
import { LayIcon } from '@layui/icons-vue';
import { computed } from 'vue';
import type { ButtonProps } from '@layui/layui-vue/types/component/button/index.vue';
import {
    type BorderType,
    check_when,
    type FaceType,
    type IconType,
    type IValues,
    type ShapeType,
    type ThemeType,
    type WhenType,
} from 'aoe';
import { prepare_theme } from './index.ts';

const props = defineProps<{
    /**
     *
     */
    disabled?: boolean;
    /**
     *
     */
    when?: WhenType;
    /**
     *
     */
    value?: IValues;
    /**
     *
     */
    label?: string;
    /**
     * 图标
     */
    icon?: IconType;
    /**
     * 界面
     */
    theme?: ThemeType;
    /**
     * 边框
     */
    border?: BorderType;
    /**
     * 外观
     */
    face?: FaceType;
    /**
     * 形状
     */
    shape?: ShapeType;
}>();

const cDisabled = computed(
    () => props.disabled || (props.when && props.value && check_when(props.when, props.value)),
);

const bBorder = computed<ButtonProps['borderStyle']>(() => {
    if (!props.face) return undefined;
    return props.face === 'light' ? 'solid' : undefined;
});

const bType = computed<undefined | ButtonProps['type']>(() => {
    if (cDisabled.value || bBorder.value || !props.theme) return undefined;
    return prepare_theme(props.theme);
});

const bBorderColor = computed<undefined | ButtonProps['border']>(() => {
    if (!bBorder.value || !props.theme) return undefined;
    switch (props.theme) {
        case 'primary':
            return 'blue';
        case 'danger':
            return 'red';
        case 'warning':
            return 'orange';
        case 'success':
            return 'green';
        default:
            return undefined;
    }
});

const bRadius = computed<boolean>(
    () => !!(props.shape && bBorder.value && props.shape !== 'square'),
);


</script>

<style scoped></style>
